import React, { Component } from 'react'
import {Modal,Form,Input} from 'antd';

export default class EditForm extends Component {
    formRef = React.createRef();
    componentDidMount(){
        const {setFieldsValue}= this.formRef.current;
       setFieldsValue({
           id:this.props.data.id,
           username:this.props.data.name,
           openid:this.props.data.openID,
           tel:this.props.data.phone
       });
    
        
        // this.props.form.setFieldsValue(this.props.data)
    }
    render() {
 
        
        return (
            <Form ref={this.formRef}
                layout="horizontal"
                labelCol={{span:4}}//不能超过24
                wrapperCol={{span:10}}>
                
                <Form.Item name="id" label='编号' 
                rules={[{
                        required:true,
                        message:'请输入编号',
                    }]}>
                <Input placeholder='编号' />  
                </Form.Item>
                    
                <Form.Item name="username" label='用户名' 
                    rules={[{//pattern正则匹配，type选类型
                            pattern:/\w{4,20}/gi,
                            message:'请输入4-20个字符',
                        },
                        {
                            required:true,
                            message:'请输入用户名',
                        }]}>
                <Input placeholder='用户名' />  
                </Form.Item>
                <Form.Item name="openid" label='openID' 
                    rules={[{
                            required:true,
                            message:'请输入openid',
                        }]}>
                <Input placeholder='openID' />  
                </Form.Item>
                <Form.Item name="tel" label='电话' 
                    rules={[{
                            pattern:/\b1[358]\d{9}\b/g,
                            message:'请输入合法的电话号码',
                        },
                        {
                            required:true,
                            message:'请输入电话',
                        }]}>
                    <Input placeholder='电话' />  
                    </Form.Item>
                </Form>
        )
    }
}
